<template>
  <el-card class="chart-card">
    <template #header>
      <div class="card-header">
        <span>问题热力图</span>
        <el-icon><Grid /></el-icon>
      </div>
    </template>
    <div class="chart-container">
      <v-chart class="chart" :option="heatmapOption" autoresize />
    </div>
  </el-card>
</template>

<script setup>
import { computed } from 'vue'
import { useAnrStore } from '../stores/anr'
import { storeToRefs } from 'pinia'
import { Grid } from '@element-plus/icons-vue'

const anrStore = useAnrStore()
const { trendData } = storeToRefs(anrStore)

const heatmapOption = computed(() => {
  const data = (trendData.value && trendData.value.heatmap) || {}
  return {
    tooltip: { position: 'top' },
    grid: { height: '50%', top: '10%' },
    xAxis: { type: 'category', data: data.xAxis || [], splitArea: { show: true } },
    yAxis: { type: 'category', data: data.yAxis || [], splitArea: { show: true } },
    visualMap: { min: 0, max: 10, calculable: true, orient: 'horizontal', left: 'center', bottom: '15%' },
    series: data.series || []
  }
})
</script>

<style scoped>
.chart-card { height: 400px; }
.card-header { display: flex; justify-content: space-between; align-items: center; font-weight: 500; }
.chart-container { height: 320px; width: 100%; }
.chart { height: 100%; width: 100%; }
</style>

